import React, { useState} from 'react'
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input , Select, message } from 'antd';
import '../assets/style/mine.scss'
const { Option } = Select;
import ums from '../apis/ums'
export default function Login() {
    const [loading,setLoading]=useState(false)
  const refInfUser= React.useRef(null)
  console.log(refInfUser);
  const [user, setUser]=useState( JSON.parse(localStorage.getItem('user')))
    const navigate = useNavigate();
    const onFinish = (values) => {
        setLoading(true)
      ums.addOrEditAccount(values).then(res=>{
        console.log(res);
        if (res.code === 1) {
            message.success("添加成功")
            setLoading(false)
            refInfUser.current.resetFields()
          } else {
            message.error("添加失败")
            setLoading(false)
          }
      })
       
      };
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
    return (
      <div className='divss'>
      <Form
    name="basic"
    ref={refInfUser}
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 300,
    }}
    initialValues={{
        userGroup: "普通管理员",
      }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label={<div className='names'>用户名</div>}
      name="account"
      rules={[
        {
          required: true,
          message: '请输入用户名',
        },
      ]}
    >
      <Input placeholder='请输入用户名' />
    </Form.Item>

    <Form.Item
      label={<div className='names'>密码</div>}
      name="password"
      rules={[
        {
          required: true,
          message: '请输入密码',
        },
      ]}
    >
      <Input.Password placeholder='请输入密码' />
    </Form.Item>
    <Form.Item
        name="userGroup"
        label="角色"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Select
          placeholder="请选择角色"
        //   onChange={onGenderChange}
          allowClear
        >
          <Option value="普通管理员">普通管理员</Option>
          <Option value="超级管理员">超级管理员</Option>
        </Select>
      </Form.Item>
    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button loading={loading}  type="primary" htmlType="submit">
        提交
      </Button>
    </Form.Item>
  </Form></div>
    
    )
  }